import { Allotment } from "allotment";
import "allotment/dist/style.css"
import { useComponentStore } from "./stores/components";
import { Header } from "../components/Header"
import { EditArea } from "../components/EditArea"
import { Setting } from "../components/Setting"
import { MaterialWrapper } from "../components/MaterialWrapper";
import { Preview } from "../components/Preview"


export default function ReactPlaygound(){
    const { mode } = useComponentStore()

    return (
        <div className="h-[100vh] flex flex-col">
            <div className="h-[60px] flex items-center border-b-[1px] border-[#000]">
                <Header /> 
            </div>
            { mode === 'edit' 
                ? <Allotment>
                    <Allotment.Pane preferredSize={240} minSize={200} maxSize={300}>
                        <MaterialWrapper />
                    </Allotment.Pane>
                    <Allotment.Pane>
                        <EditArea />
                    </Allotment.Pane>
                    <Allotment.Pane preferredSize={300} minSize={300} maxSize={500}>
                        <Setting />
                    </Allotment.Pane>
                </Allotment> 
                : <Preview/>
            }
        </div>
    )
}